<template>
  <div>
    <div style="display: flex; justify-content: space-between">
      <div class="left">
        <el-row :gutter="20" class="mgb20">
          <div class="t1">数据分析</div>
          <el-col :span="6" class="vol">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <i class="el-icon-coin grid-con-icon"></i>
                <div class="grid-cont-right" v-if="allType == 1">
                  <div class="grid-num">
                    {{ data9.sumPrice }}
                  </div>
                  <div class="t8">总金额(万)</div>
                </div>
                <div class="grid-cont-right" v-if="allType == 2">
                  <div class="grid-num">
                    {{ lu }}
                  </div>
                  <div class="t8">总容量(MW)</div>
                </div>
                <div class="grid-cont-right" v-if="allType == 3">
                  <div class="grid-num">
                    {{data9.sumPrice}}/{{lu}}
                  </div>
                  <div class="t8">总金额(万)/总容量(MW)</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                <i class="el-icon-set-up grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">
                    {{ data9.money }}/{{ fun(data9.MW) }}
                  </div>
                  <div class="t8">系统(万)/组件(MW)</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <i class="el-icon-notebook-1 grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">
                    {{ data9.newCustomerNum }}/{{ data9.newCustomerMony }}
                  </div>
                  <div class="t8">本年新增数量/金额(万)</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-4">
                <i class="el-icon-circle-check grid-con-icon"></i>
                <div class="grid-cont-right" v-if="allType == 1">
                  <div class="grid-num">{{ data9.finishing }}%</div>
                  <div class="t8">完成率(金额)</div>
                </div>
                <div class="grid-cont-right" v-if="allType == 2">
                  <div class="grid-num">{{ data9.capacity }}%</div>
                  <div class="t8">完成率(容量)</div>
                </div>
                <div class="grid-cont-right" v-if="allType == 3">
                  <div class="grid-num">
                    {{ data9.finishing }}%/{{ data9.capacity }}%
                  </div>
                  <div class="t8">完成率(金额/容量)</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-card shadow="hover">
              <div class="index_Bottom">
                <div
                  style="margin-bottom: 10px; font-size: 19px; font-weight: 700"
                >
                  数据简报
                </div>
              </div>
              <div class="index_Data clearfix">
                <div class="box">
                  <div class="box2" @click.stop="customer()">
                    <span class="t2">{{ customerData.sumCustomerNum }}</span>
                    <span class="t3">客户总数</span>
                  </div>
                </div>
                <div class="box">
                  <div class="box2" @click.stop="customer(1)">
                    <span class="t2">{{ a }}</span>
                    <span class="t3">成交客户(A)数量</span>
                  </div>
                </div>
                <div class="box">
                  <div class="box2" @click.stop="customer(2)">
                    <span class="t2">{{ aa }}</span>
                    <span class="t3">意向客户(B)数量</span>
                  </div>
                </div>
                <div class="box" style="border: none">
                  <div class="box2" @click.stop="customer(3)">
                    <span class="t2">{{ aaa }}</span>
                    <span class="t3">跟踪客户(C)数量</span>
                  </div>
                </div>
              </div>
              <div
                style="border-top: 1px solid #ddd"
                class="index_Data clearfix"
              >
                <div class="box">
                  <div class="box2" @click.stop="resource">
                    <span class="t2">{{ customerData.highNumber }}</span>
                    <span class="t3">公海客户数量</span>
                  </div>
                </div>
                <div class="box">
                  <div class="box2" @click.stop="order_List('2')">
                    <span class="t2">{{ customerData.module }}</span>
                    <span class="t3">组件订单数</span>
                  </div>
                </div>
                <div class="box">
                  <div class="box2" @click.stop="order_List('1')">
                    <span class="t2">{{ customerData.system }}</span>
                    <span class="t3">系统订单数</span>
                  </div>
                </div>
                <div class="box" style="border: none" @click="customer2">
                  <div class="box2">
                    <span class="t2">{{ customerData.fastExpire }}</span>
                    <span class="t3">将入公海客户数量</span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-card shadow="hover">
              <div class="countCallNumber">
                <h6 style="margin-bottom: 10px; font-size: 19px">
                  订单分析
                  <el-date-picker
                    v-model="startTime"
                    value-format="yyyy-MM"
                    type="month"
                    placeholder="开始时间"
                  ></el-date-picker>
                  <el-date-picker
                    v-model="finishTime"
                    value-format="yyyy-MM"
                    type="month"
                    @change="getCountCallNumber"
                    placeholder="结束时间"
                  ></el-date-picker>
                  <!-- <el-select
                  v-model="jidu666"
                  @change="fetchJidu"
                  placeholder="请选择季度"
                  clearable
                >
                  <el-option
                    v-for="item in jiduOptions2"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select> -->
                </h6>
                <!-- <div class="right">
                <div class="box">
                  <span class="t1">系统订单数量:</span>
                  <span class="t2">{{ ordernum }}</span>
                </div>
                <div class="box">
                  <span class="t1">系统订单总金额:</span>
                  <span class="t3">{{ ordermoney }}</span>
                </div>
              </div> -->
              </div>
              <div class="schart-box">
                <div
                  id="myChart"
                  ref="order"
                  style="height: 320px; width: 100%;display: inline-block;"
                ></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="right">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-card shadow="hover" class="right1">
              <div class="top" @click.stop="customer2">回收提醒>></div>
              <div class="scroll">
                <div
                  class="info"
                  v-for="(item, index) in orderLstData"
                  :key="index"
                >
                  <h4>{{ item.companyName }}</h4>
                  <div class="tt">客户姓名:{{ item.customerName }}</div>
                  <div class="tt">{{ data9.fewDays }}天未联系</div>
                  <!-- <span class="c1">{{item.updateTime}}天后</span> -->
                  <!-- <span class="c2" v-if="item.status == 1">已提醒</span> -->
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-card shadow="hover" class="right1">
              <div class="top2">公司公告</div>
              <div class="scroll">
                <div
                  class="info2"
                  v-for="(item, index) in noticeList"
                  :key="index"
                  @click="tankuang(item)"
                >
                  <div class="tt">
                    {{ item.noticeTitle }}
                    <span class="dian">·</span>
                  </div>
                  <div class="ttt">{{ item.noticeContent }}</div>
                  <div class="tttt">发布时间:{{ item.createTime }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 公告弹框 -->
      <el-dialog title="公告" :visible.sync="dialogTableVisible2" width="700px">
        <div class="center6">
          <div class="top">{{ getRemainsData2.noticeTitle }}</div>
          <div class="ccc">{{ getRemainsData2.noticeContent }}</div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="quxiao2" size="small" type="primary"
            >确定</el-button
          >
        </span>
      </el-dialog>
    </div>

    <!-- 系统/组件订单数量、订单金额 -->
    <!-- <div class="left">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card shadow="hover">
            <div class="countCallNumber">
              <h6 style="margin-bottom: 10px; font-size: 19px">
                订单分析
                <el-date-picker
                  v-model="yearvalue"
                  type="year"
                  @change="getCountCallNumber"
                  placeholder="选择年份"
                ></el-date-picker>
                <el-select
                  v-model="jidu"
                  @change="fetchJidu"
                  placeholder="请选择季度"
                  clearable
                >
                  <el-option
                    v-for="item in jiduOptions"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </h6>
            </div>
            <div class="schart-box">
              <div
                id="myChart"
                ref="order"
                style="height: 320px; width: 100%;display: inline-block;"
              ></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div> -->
    <!-- 渠道统计：客户数量、订单数量、订单金额 -->
    <div style="width: 100%">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card shadow="hover">
            <div class="countCallNumber">
              <h6
                style="margin-bottom: 10px; font-size: 19px;display:inline-block;"
              >
                渠道统计
                <el-date-picker
                  v-model="startTime1"
                  value-format="yyyy-MM"
                  @change="fromData(3)"
                  type="month"
                  placeholder="开始时间"
                ></el-date-picker>
                <el-date-picker
                  v-model="finishTime1"
                  value-format="yyyy-MM"
                  type="month"
                  @change="fromData(3)"
                  placeholder="结束时间"
                ></el-date-picker>
                <!-- <el-date-picker
                  v-model="yearvalue1"
                  type="year"
                  @change="fromData(3)"
                  placeholder="选择年份"
                ></el-date-picker>
                <el-select
                  v-model="jiduvalue"
                  @change="fromData(2)"
                  placeholder="请选择季度"
                >
                  <el-option
                    v-for="item in jiduOptions"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select> -->
              </h6>
              <div class="right">
                <div class="box">
                  <span class="t1">客户数量:</span>
                  <span class="t4">{{ from_customer }}</span>
                </div>
                <div class="box">
                  <span class="t1">订单数量:</span>
                  <span class="t2">{{ from_ordernum }}</span>
                </div>
                <div class="box">
                  <span class="t1">总金额(万):</span>
                  <span class="t3">{{ formatMoney(from_ordermoney) }}</span>
                </div>
              </div>
            </div>
            <div class="schart-box">
              <div
                id="myChart1"
                style="display: inline-block;height: 320px; width: 33%;"
              ></div>
              <div
                id="myChart3"
                style="display: inline-block;height: 320px; width: 33%;"
              ></div>
              <div
                id="myChart2"
                style="display: inline-block;height: 320px; width: 33%;"
              ></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 地区统计 -->
    <div style="width: 100%">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card shadow="hover">
            <div class="countCallNumber">
              <h6 style="margin-bottom: 10px; font-size: 19px">
                地区统计
                <el-date-picker
                  v-model="startTime2"
                  value-format="yyyy-MM"
                  @change="areaData(3)"
                  type="month"
                  placeholder="开始时间"
                ></el-date-picker>
                <el-date-picker
                  v-model="finishTime2"
                  value-format="yyyy-MM"
                  type="month"
                  @change="areaData(3)"
                  placeholder="结束时间"
                ></el-date-picker>
                <!-- <el-date-picker
                  v-model="yearvalue2"
                  type="year"
                  @change="areaData(3)"
                  placeholder="选择年份"
                ></el-date-picker>-->
                <el-select
                  v-model="city"
                  @change="areaData(3)"
                  placeholder="省市筛选"
                  clearable
                >
                  <el-option label="省" :value="1"> </el-option>
                  <el-option label="市" :value="2"> </el-option>
                </el-select>
              </h6>
              <div class="right">
                <div class="box">
                  <span class="t1">客户数量:</span>
                  <span class="t4">{{ area_customer }}</span>
                </div>
                <div class="box">
                  <span class="t1">订单数量:</span>
                  <span class="t2">{{ area_ordernum }}</span>
                </div>
                <div class="box">
                  <span class="t1">总金额(万):</span>
                  <span class="t3">{{ formatMoney(area_ordermoney) }}</span>
                </div>
              </div>
            </div>
            <div class="schart-box">
              <div
                id="myChart4"
                style="display: inline-block;height: 320px; width: 33%;"
              ></div>
              <div
                id="myChart5"
                style="display: inline-block;height: 320px; width: 67%;"
              ></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 客户类型 -->
    <div style="width: 100%">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card shadow="hover">
            <div class="countCallNumber">
              <h6 style="margin-bottom: 10px; font-size: 19px">
                客户类型统计
                <el-date-picker
                  v-model="startTime3"
                  value-format="yyyy-MM"
                  @change="typeData(3)"
                  type="month"
                  placeholder="开始时间"
                ></el-date-picker>
                <el-date-picker
                  v-model="finishTime3"
                  value-format="yyyy-MM"
                  type="month"
                  @change="typeData(3)"
                  placeholder="结束时间"
                ></el-date-picker>
                <!-- <el-date-picker
                  v-model="yearvalue3"
                  type="year"
                  @change="typeData(3)"
                  placeholder="选择年份"
                ></el-date-picker>
                <el-select
                  v-model="jiduvalue2"
                  @change="typeData(2)"
                  placeholder="选择季度"
                  clearable
                >
                  <el-option
                    v-for="item in jiduOptions"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select> -->
              </h6>
              <div class="right">
                <div class="box">
                  <span class="t1">客户数量:</span>
                  <span class="t4">{{ type_customer }}</span>
                </div>
                <div class="box">
                  <span class="t1">订单数量:</span>
                  <span class="t2">{{ type_ordernum }}</span>
                </div>
                <div class="box">
                  <span class="t1">总金额(万):</span>
                  <span class="t3">{{ formatMoney(type_ordermoney) }}</span>
                </div>
              </div>
            </div>
            <div class="schart-box">
              <div
                id="myChart6"
                style="display: inline-block;height: 320px; width: 33%;"
              ></div>
              <div
                id="myChart7"
                style="display: inline-block;height: 320px; width: 67%;"
              ></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
  <!-- <Indexnet v-else/> -->
</template>

<script>
import Schart from "vue-schart";
import {
  getAreaData,
  getData,
  getFromData,
  getNumber,
  getGradeData,
  getOrderData,
  getNotice
} from "@/api/indexN";
import vueSeamlessScroll from "vue-seamless-scroll";
// import Indexnet from "./index_net.vue"
// import { mapGetters, mapActions, mapState, mapMutations } from "vuex";
export default {
  name: "dashboard",
  data() {
    return {
      lu: "",
      allType: "",
      jidu666: "年度查询",
      show_net: true,
      baifenbi: "",
      year: "",
      // 选择月份
      monthvalue: "",
      finishTime: "",
      startTime: "",
      startTime1: "",
      finishTime1: "",
      startTime2: "",
      finishTime2: "",
      startTime3: "",
      finishTime3: "",
      // 选择年份
      yearvalue: "",
      yearvalue1: "",
      yearvalue2: "",
      yearvalue3: "",
      city: 1,
      // 选择季度
      jidu: "",
      jiduvalue: 1,
      jiduvalue1: 1,
      jiduvalue2: 1,
      jiduOptions: [
        {
          id: 1,
          title: "第一季度"
        },
        {
          id: 2,
          title: "第二季度"
        },
        {
          id: 3,
          title: "第三季度"
        },
        {
          id: 4,
          title: "第四季度"
        }
      ],
      jiduOptions2: [
        {
          id: 1,
          title: "年度查询"
        },
        {
          id: 2,
          title: "季度查询"
        }
      ],
      dialogTableVisible: false,
      dialogTableVisible2: false,
      // 第一排的数据
      orderLstData: [],
      orderList: [],
      // 数据简报
      customerData: {},
      a: null,
      aa: null,
      aaa: null,

      getRemainsData2: {},
      data9: {},
      monthX: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
      ],
      jiduX: ["第一季度", "第二季度", "第三季度", "第四季度"],
      systemYearNum: [],
      systemYearMoney: [],
      systemQuarterNum: [],
      systemQuarterMoney: [],
      moduleYearNum: [],
      moduleYearMoney: [],
      moduleQuarterNum: [],
      moduleQuarterMoney: [],
      ordernum: 0,
      ordermoney: 0,
      noticeList: [],
      fromCustomer: [],
      fromOrderName: [],
      fromOrderNum: [],
      fromOrderMoney: [],
      from_ordernum: 0,
      from_ordermoney: 0,
      from_customer: 0,
      areaCustomer: [],
      areaName: [],
      areaOrderNum: [],
      areaOrderMoney: [],
      area_ordernum: 0,
      area_ordermoney: 0,
      area_customer: 0,
      typeName1: [],
      typeCustomer: [],
      typeName: [],
      typeOrderNum: [],
      typeOrderMoney: [],
      type_ordernum: 0,
      type_ordermoney: 0,
      type_customer: 0
    };
  },
  components: {
    Schart,
    vueSeamlessScroll
    // quarter
  },
  computed: {
    // ...mapGetters(["getTimeOut"]),
    classOption() {
      return {
        singleHeight: 0,
        waitTime: 1000,
        step: 0.5,
        hoverStop: true,
        direction: 1,
        singleWidth: 0
      };
    }
  },
  watch: {
    getTimeOut: function(val) {
      if (this.getTimeOut != null && this.getTimeOut.length > 0)
        this.dialogTableVisible = true;
    }
  },
  filters: {
    formatDate: function(value) {
      let date = new Date(parseInt(value) * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let minute = date.getMinutes();
      let second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d;
    },
    formatDate2: function(value) {
      let date = new Date(parseInt(value) * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let minute = date.getMinutes();
      let second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    num1: function(value) {
      return value.toFixed(2);
    }
  },
  created() {
    var date = new Date();
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    this.monthvalue = y + "-" + m;
    this.yearvalue = new Date();
    this.yearvalue1 = new Date();
    this.yearvalue2 = new Date();
    this.yearvalue3 = new Date();
    this.getData();
    this.getTop();
    this.getNotice();
    // 判断统计是按金额还是容量还是金额/容量
    // 1-金额 2-容量 3-金额/容量
    this.allType = localStorage.getItem("statisticsType");
  },
  mounted() {
    this.getCountCallNumber();
    this.fromData(3);
    this.areaData(3);
    this.typeData(3);
    this.getRemains();
    this.drawLine();
    this.drawArea();
    this.drawType();
  },
  methods: {
    fun(val) {
      return Number(val).toFixed(2);
    },
    getNotice() {
      getNotice({
        pageNum: 1,
        pageSize: 100
      })
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            this.noticeList = res.rows;
          }
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
    },
    formatMoney: function(val) {
      return (val / 10000).toFixed(2);
    },
    formatKW: function(val) {
      return (val / 1000).toFixed(2);
    },
    resource() {
      // let type9 = localStorage.getItem("type9");
      // if (type9 == '1') {
      //   console.log("国外");
      //   this.$router.push({
      //     name: "Resourced"
      //   });
      // } else if (type9 == '2') {
      console.log("国内");
      this.$router.push({
        name: "Resourced1"
      });
      // }
    },
    order_List(e) {
      // this.$router.push({})
      this.$router.push({
        path: "systemSettings/test/testN",
        query: {
          id: e
        }
      });
    },
    customer2() {
      let type9 = localStorage.getItem("type9");
      // if (type9 == '1') {
      //   console.log("国外");
      //   this.$router.push({
      //     name: "Customer1",
      //     params: {
      //       day: this.data9.day,
      //     },
      //   });
      // } else if (type9 == '2') {
      console.log("国内");
      this.$router.push({
        name: "Customer",
        params: {
          day: this.data9.day
        }
      });
      // }
    },
    customer(e) {
      // console.log("跳转", e);
      // console.log("type9", localStorage.getItem("type9"));
      // let type9 = localStorage.getItem("type9");
      // if (type9 == '1') {
      //   console.log("国外");
      //   this.$router.push({
      //     name: "Customer1",
      //     params: {
      //       id: e,
      //     },
      //   });
      // } else if (type9 == '2') {
      console.log("国内");
      this.$router.push({
        name: "Customer",
        params: {
          id: e
        }
      });
      // }
    },
    bindGetTime(e) {
      console.log(this.yearvalue.getFullYear(), "1");
      console.log(this.yearvalue1.getFullYear(), "2");
      console.log(this.yearvalue2.getFullYear(), "3");
      console.log(this.yearvalue3.getFullYear(), "4");
      this.getCountCallNumber();
    },
    call() {
      // let type9 = localStorage.getItem("type9");
      // if (type9 == 0) {
      //   console.log("跳资质");
      //   this.$router.push({
      //     path: "/qualifications",
      //     query: {
      //       id: 1
      //     }
      //   });
      // } else if (type9 == 1) {
      //   this.$router.push({
      //     path: "/phone",
      //     query: {
      //       id: 1
      //     }
      //   });
      //   console.log("跳普通");
      // }
    },
    getValue(value) {
      console.log(value);
    },
    tankuang(item) {
      console.log(item);
      this.getRemainsData2 = item;
      this.dialogTableVisible2 = true;
    },
    quxiao2() {
      this.dialogTableVisible2 = false;
    },

    // 获取提醒事项--即将入公海数据
    getRemains() {
      // getRemains({
      //   pageNum: 1,
      //   pageSize: 30
      // }).then(res => {
      //   this.orderLstData = res.rows;
      // });
    },
    // 获取顶部的四个数据
    getTop() {
      getNumber().then(res => {
        // 此处为提前转编译
        res.data.sumPrice = this.formatMoney(res.data.sumPrice);
        res.data.sumCapacity = res.data.sumCapacity;
        res.data.money = this.formatMoney(res.data.money);
        // res.data.MW=this.formatKW(res.data.MW);
        res.data.newCustomerMony = this.formatMoney(res.data.newCustomerMony);
        res.data.finishing = (res.data.finishing * 100).toFixed(1);
        res.data.capacity = (res.data.capacity * 100).toFixed(1);
        // console.log(this.data9, "data9顶部信息---------");
        this.data9 = res.data;
        // 修改
        this.lu = res.data.sumCapacity.toFixed(3);
        this.orderLstData = res.data.list;
        // console.log(this.orderLstData,'完成率数据----------------')
        // console.log('回收提醒的数据11111111111111',this.orderLstData)
      });
    },
    // 获取中间的八个数据
    getData() {
      getData().then(res => {
        this.customerData = res.data;
        let one = res.data.list.find(item => {
          return item.gradeName == "A(跟踪客户)";
        });
        // this.a = one.num;
        // console.log(one,'---------------')
        if (one) {
          this.a = one.num;
        } else {
          this.a = "0";
        }
        let two = res.data.list.find(item => {
          return item.gradeName == "AA(意向客户)";
        });
        if (two) {
          this.aa = two.num;
        } else {
          this.aa = "0";
        }
        let three = res.data.list.find(item => {
          return item.gradeName == "AAA(成交客户)";
        });
        if (three) {
          this.aaa = three.num;
        } else {
          this.aaa = "0";
        }
        console.log(this.customerData, "中间八个");
      });
    },

    // 获取系统/组件订单量的折线图
    fetchJidu(e) {
      console.log(e);
      if (e == 2) {
        this.jidu = 1;
        this.drawLineData1();
      } else {
        this.getCountCallNumber();
      }
    },
    getCountCallNumber() {
      // this.jidu666='年度查询';
      let params;
      params = {
        // year: this.yearvalue.getFullYear(),
        startTime: this.startTime,
        finishTime: this.finishTime
      };
      getOrderData(params).then(res => {
        if (res.code == 200) {
          this.orderList = res.data;
          // this.systemYearNum = res.data.systemYearNum;
          // this.systemYearMoney = res.data.systemYearMoney;
          // this.systemQuarterNum = res.data.systemQuarterNum;
          // this.systemQuarterMoney = res.data.systemQuarterMoney;
          // this.moduleYearNum = res.data.moduleYearNum;
          // this.moduleYearMoney = res.data.moduleYearMoney;
          // this.moduleQuarterNum = res.data.moduleQuarterNum;
          // this.moduleQuarterMoney = res.data.moduleQuarterMoney;
          // this.ordernum = 0;
          // this.systemYearNum.forEach(item => {
          //   this.ordernum += item;
          // });
          // this.ordermoney = 0;
          // this.systemYearMoney.forEach(item => {
          //   this.ordermoney += item;
          // });
          this.drawLineData();
        }
      });
    },
    drawLineData1() {
      let box = this.$refs.order;
      if (box) {
        let myChart = this.$echarts.init(box);
        myChart.setOption({
          xAxis: {
            data: this.jiduX,
            boundaryGap: false,
            axisTick: {
              show: false
            },
            splitLine: {
              show: false //去掉网格线
            },
            // 间隔显示
            axisLabel: {
              // interval: 1
            }
          },
          grid: {
            left: 40,
            right: 60,
            bottom: 0,
            top: 50,
            containLabel: true
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line"
            },
            padding: [5, 10]
          },
          yAxis: [
            {
              type: "value",
              name: "订单数量",
              splitNumber: 10,
              axisLabel: {
                formatter: "{value}"
              },
              splitLine: {
                show: false //去掉网格线
              }
            },
            {
              type: "value",
              name: "订单金额/元",
              splitNumber: 10,
              axisLabel: {
                formatter: "{value}"
              },
              splitLine: {
                show: false //去掉网格线
              }
            }
          ],
          // legend: {
          //   data: ["系统订单数量", "系统订单金额","组件订单数量","组件订单金额"]
          // },
          series: [
            {
              name: "系统订单数量",
              yAxisIndex: 0,
              itemStyle: {
                normal: {
                  color: "#099cf8",
                  lineStyle: {
                    color: "#099cf8",
                    width: 2
                  }
                }
              },
              smooth: true,
              type: "line",
              data: this.systemYearNum,
              animationDuration: 3000,
              animationEasing: "cubicInOut"
            },
            {
              name: "系统订单金额",
              yAxisIndex: 0,
              smooth: true,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#ff8c2d",
                  lineStyle: {
                    color: "#ff8c2d",
                    width: 2
                  }
                }
              },
              data: this.systemYearMoney,
              animationDuration: 3000,
              animationEasing: "quadraticOut"
            },
            {
              name: "组件订单数量",
              yAxisIndex: 0,
              itemStyle: {
                normal: {
                  color: "#5470c6",
                  lineStyle: {
                    color: "#5470c6",
                    width: 2
                  }
                }
              },
              smooth: true,
              type: "line",
              data: this.moduleYearNum,
              animationDuration: 3000,
              animationEasing: "cubicInOut"
            },
            {
              name: "组件订单金额",
              yAxisIndex: 0,
              smooth: true,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#91cc75",
                  lineStyle: {
                    color: "#91cc75",
                    width: 2
                  }
                }
              },
              data: this.moduleYearMoney,
              animationDuration: 3000,
              animationEasing: "quadraticOut"
            }
          ]
        });
      }
    },
    drawLineData() {
      // 基于准备好的dom，初始化echarts实例
      let box = this.$refs.order;
      if (box) {
        let myChart = this.$echarts.init(box);
        // 绘制图表
        myChart.setOption({
          xAxis: {
            data: this.orderList.map(item => item.month),
            boundaryGap: false,
            axisTick: {
              show: false
            },
            splitLine: {
              show: false //去掉网格线
            },
            // 间隔显示
            axisLabel: {
              // interval: 1
            }
          },
          grid: {
            left: 40,
            right: 60,
            bottom: 0,
            top: 50,
            containLabel: true
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line"
            },
            padding: [5, 10]
          },
          yAxis: [
            {
              type: "value",
              name: "订单数量",
              yAxisIndex: 0,
              splitNumber: 10,
              axisLabel: {
                formatter: "{value}"
              },
              splitLine: {
                show: false //去掉网格线
              }
            },
            {
              type: "value",
              name: "订单金额/元",
              yAxisIndex: 1,
              splitNumber: 10,
              axisLabel: {
                formatter: "{value}"
              },
              splitLine: {
                show: false //去掉网格线
              }
            }
          ],
          legend: {
            data: [
              "系统订单数量",
              "系统订单金额",
              "系统订单利润",
              "组件订单数量",
              "组件订单金额",
              "组件订单利润"
            ]
          },
          series: [
            {
              name: "系统订单数量",
              yAxisIndex: 0,
              itemStyle: {
                normal: {
                  color: "#099cf8",
                  lineStyle: {
                    color: "#099cf8",
                    width: 2
                  }
                }
              },
              smooth: true,
              type: "line",
              data: this.orderList.map(item => item.systemMonthCount),
              animationDuration: 3000,
              animationEasing: "cubicInOut"
            },
            {
              name: "系统订单金额",
              yAxisIndex: 1,
              smooth: true,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#ff8c2d",
                  lineStyle: {
                    color: "#ff8c2d",
                    width: 2
                  }
                }
              },
              data: this.orderList.map(item => item.systemMonthMoney),
              animationDuration: 3000,
              animationEasing: "quadraticOut"
            },
            {
              name: "系统订单利润",
              yAxisIndex: 1,
              smooth: true,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#ff8c2d",
                  lineStyle: {
                    color: "#ff8c2d",
                    width: 2
                  }
                }
              },
              data: this.orderList.map(item => item.systemProfit),
              animationDuration: 3000,
              animationEasing: "quadraticOut"
            },
            {
              name: "组件订单数量",
              yAxisIndex: 0,
              itemStyle: {
                normal: {
                  color: "#5470c6",
                  lineStyle: {
                    color: "#5470c6",
                    width: 2
                  }
                }
              },
              smooth: true,
              type: "line",
              data: this.orderList.map(item => item.modleMonthCount),
              animationDuration: 3000,
              animationEasing: "cubicInOut"
            },
            {
              name: "组件订单金额",
              yAxisIndex: 1,
              smooth: true,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#91cc75",
                  lineStyle: {
                    color: "#91cc75",
                    width: 2
                  }
                }
              },
              data: this.orderList.map(item => item.modleMonthMoney),
              animationDuration: 3000,
              animationEasing: "quadraticOut"
            },
            {
              name: "组件订单利润",
              yAxisIndex: 1,
              smooth: true,
              type: "line",
              itemStyle: {
                normal: {
                  color: "#ff8c2d",
                  lineStyle: {
                    color: "#ff8c2d",
                    width: 2
                  }
                }
              },
              data: this.orderList.map(item => item.modleProfit),
              animationDuration: 3000,
              animationEasing: "quadraticOut"
            }
          ]
        });
      }
    },

    // 获取渠道统计数据
    fromData(t) {
      let params;
      if (t == 3) {
        params = {
          // year: this.yearvalue1.getFullYear(),
          // quarter:this.jiduvalue
          startTime: this.startTime1,
          finishTime: this.finishTime1
        };
      } else if (t == 2) {
        if (this.jiduvalue) {
          params = {
            year: this.yearvalue1.getFullYear(),
            quarter: this.jiduvalue
          };
        } else {
          params = {
            year: this.yearvalue1.getFullYear()
          };
        }
      }
      getFromData(params).then(res => {
        if (res.code == 200) {
          this.fromCustomer = res.data.custemor;
          // this.fromOrderName = res.data.orderNum;
          // this.fromOrderMoney = res.data.money;
          this.fromOrderName = res.data.orderNum.map(item => {
            return item.name;
          });
          this.fromOrderNum = res.data.orderNum.map(item => {
            return item.value;
          });
          this.fromOrderMoney = res.data.money;
          this.from_customer = 0;
          this.from_ordernum = 0;
          this.from_ordermoney = 0;
          this.fromCustomer.forEach(item => {
            this.from_customer += item.value;
          });
          this.fromOrderNum.forEach(item => {
            this.from_ordernum += item;
          });
          this.fromOrderMoney.forEach(item => {
            this.from_ordermoney += item.value;
          });
          console.log(
            this.fromCustomer,
            this.fromOrderNum,
            this.fromOrderMoney,
            "-------------------------------"
          );
          this.drawLine();
        }
      });
    },
    // 渠道统计三个图
    drawLine() {
      var _this = this;
      // 基于准备好的dom，初始化echarts实例
      let myChart1 = this.$echarts.init(document.getElementById("myChart1"));
      let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
      let myChart3 = this.$echarts.init(document.getElementById("myChart3"));
      // 绘制图表
      myChart1.setOption({
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc"
        ],
        gradientColor: ["#f6efa6", "#d88273", "#bf444c"],
        textStyle: {
          fontFamily: "Microsoft YaHei",
          fontSize: 12,
          fontStyle: "normal",
          fontWeight: "normal"
        },
        stateAnimation: {
          duration: 300,
          easing: "cubicOut"
        },
        animation: "auto",
        animationDuration: 500,
        animationDurationUpdate: 500,
        animationEasing: "cubicInOut",
        animationEasingUpdate: "cubicInOut",
        animationThreshold: 2000,
        progressiveThreshold: 3000,
        progressive: 400,
        hoverLayerThreshold: 3000,
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "客户来源",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2
            },
            center: ["65%", "50%"],
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: this.fromCustomer
          }
        ]
      });
      myChart2.setOption({
        color: ["#5470c6"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.fromOrderName,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "订单数量"
          }
        ],
        series: [
          {
            name: "订单数量",
            type: "bar",
            barWidth: "45%",
            data: this.fromOrderNum
          }
        ]
      });
      myChart3.setOption({
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc"
        ],
        gradientColor: ["#f6efa6", "#d88273", "#bf444c"],
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            center: ["65%", "50%"],
            name: "订单金额",
            type: "pie",
            radius: "65%",
            data: this.fromOrderMoney,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },

    // 获取地区统计数据
    areaData(t) {
      let params;
      if (t == 3) {
        params = {
          startTime: this.startTime2,
          finishTime: this.finishTime2,
          type: this.city
        };
      } else if (t == 2) {
        if (this.jiduvalue1) {
          params = {
            year: this.yearvalue2.getFullYear(),
            quarter: this.jiduvalue1
          };
        } else {
          params = {
            year: this.yearvalue2.getFullYear()
          };
        }
      }
      getAreaData(params).then(res => {
        if (res.code == 200) {
          this.areaCustomer = res.data.custemor;
          this.areaName = res.data.orderNum.map(item => {
            return item.name;
          });
          this.areaOrderNum = res.data.orderNum.map(item => {
            return item.value;
          });
          this.areaOrderMoney = res.data.money.map(item => {
            return item.value;
          });
          this.area_ordernum = 0;
          this.area_ordermoney = 0;
          this.area_customer = 0;
          this.areaCustomer.forEach(item => {
            this.area_customer += item.value;
          });
          this.areaOrderNum.forEach(item => {
            this.area_ordernum += item;
          });
          this.areaOrderMoney.forEach(item => {
            this.area_ordermoney += item;
          });
          this.drawArea();
        }
      });
    },
    // 地区统计两个图
    drawArea() {
      var _this = this;
      // 基于准备好的dom，初始化echarts实例
      let myChart4 = this.$echarts.init(document.getElementById("myChart4"));
      let myChart5 = this.$echarts.init(document.getElementById("myChart5"));
      // 绘制图表
      myChart4.setOption({
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc"
        ],
        gradientColor: ["#f6efa6", "#d88273", "#bf444c"],
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "客户数量",
            type: "pie",
            radius: "65%",
            data: this.areaCustomer,
            center: ["65%", "50%"],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
      myChart5.setOption({
        xAxis: {
          data: this.areaName,
          boundaryGap: false,
          axisTick: {
            show: false
          },
          splitLine: {
            show: false //去掉网格线
          },
          // 间隔显示
          axisLabel: {
            // interval: 1
          }
        },
        grid: {
          left: 40,
          right: 60,
          bottom: 0,
          top: 50,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line"
          },
          padding: [5, 10]
        },
        yAxis: [
          {
            type: "value",
            name: "订单数量",
            yAxisIndex: 0,
            splitNumber: 10,
            axisLabel: {
              formatter: "{value}"
            },
            splitLine: {
              show: false //去掉网格线
            }
          },
          {
            type: "value",
            name: "订单金额/元",
            yAxisIndex: 1,
            splitNumber: 10,
            axisLabel: {
              formatter: "{value}"
            },
            splitLine: {
              show: false //去掉网格线
            }
          }
        ],
        legend: {
          data: ["订单金额", "订单数量"]
        },
        series: [
          {
            name: "订单数量",
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                color: "#099cf8",
                lineStyle: {
                  color: "#099cf8",
                  width: 2
                }
              }
            },
            smooth: true,
            type: "line",
            data: this.areaOrderNum,
            animationDuration: 3000,
            animationEasing: "cubicInOut"
          },
          {
            name: "订单金额",
            yAxisIndex: 1,
            smooth: true,
            type: "line",
            itemStyle: {
              normal: {
                color: "#ff8c2d",
                lineStyle: {
                  color: "#ff8c2d",
                  width: 2
                }
              }
            },
            data: this.areaOrderMoney,
            animationDuration: 3000,
            animationEasing: "quadraticOut"
          }
        ]
      });
    },

    // 获取客户类型数据
    typeData(t) {
      let params;
      if (t == 3) {
        params = {
          startTime: this.startTime3,
          finishTime: this.finishTime3
        };
      } else if (t == 2) {
        if (this.jiduvalue2) {
          params = {
            year: this.yearvalue3.getFullYear(),
            quarter: this.jiduvalue2
          };
        } else {
          params = {
            year: this.yearvalue3.getFullYear()
          };
        }
      }
      getGradeData(params).then(res => {
        if (res.code == 200) {
          this.typeName1 = res.data.custemor.map(item => {
            return item.name;
          });
          this.typeCustomer = res.data.custemor.map(item => {
            return item.value;
          });
          this.typeName = res.data.orderNum.map(item => {
            return item.name;
          });
          this.typeOrderNum = res.data.orderNum.map(item => {
            return item.value;
          });
          this.typeOrderMoney = res.data.money.map(item => {
            return item.value;
          });
          this.type_ordernum = 0;
          this.type_ordermoney = 0;
          this.type_customer = 0;
          this.typeCustomer.forEach(item => {
            this.type_customer += item;
          });
          this.typeOrderNum.forEach(item => {
            this.type_ordernum += item;
          });
          this.typeOrderMoney.forEach(item => {
            this.type_ordermoney += item;
          });
          this.drawType();
        }
      });
    },
    // 客户类型统计两个图
    drawType() {
      var _this = this;
      // 基于准备好的dom，初始化echarts实例
      let myChart6 = this.$echarts.init(document.getElementById("myChart6"));
      let myChart7 = this.$echarts.init(document.getElementById("myChart7"));
      // 绘制图表
      myChart6.setOption({
        color: ["#5470c6"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: this.typeName1,
          axisLabel: {
            interval: 0, //横轴信息全部显示
            rotate: -30 //-30度角倾斜显示
          }
        },
        yAxis: [
          {
            type: "value",
            name: "客户数量"
          }
        ],
        series: [
          {
            name: "客户数量",
            type: "bar",
            barWidth: "30%",
            data: this.typeCustomer
          }
        ]
      });
      myChart7.setOption({
        xAxis: {
          data: this.typeName,
          boundaryGap: false,
          axisTick: {
            show: false
          },
          splitLine: {
            show: false //去掉网格线
          },
          // 间隔显示
          axisLabel: {
            // interval: 1
          }
        },
        grid: {
          left: 40,
          right: 60,
          bottom: 0,
          top: 50,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line"
          },
          padding: [5, 10]
        },
        yAxis: [
          {
            type: "value",
            name: "订单数量",
            splitNumber: 10,
            yAxisIndex: 0,
            axisLabel: {
              formatter: "{value}"
            },
            splitLine: {
              show: false //去掉网格线
            }
          },
          {
            type: "value",
            name: "订单金额/元",
            splitNumber: 10,
            yAxisIndex: 1,
            axisLabel: {
              formatter: "{value}"
            },
            splitLine: {
              show: false //去掉网格线
            }
          }
        ],
        legend: {
          data: ["订单金额", "订单数量"]
        },
        series: [
          {
            name: "订单数量",
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                color: "#099cf8",
                lineStyle: {
                  color: "#099cf8",
                  width: 2
                }
              }
            },
            smooth: true,
            type: "line",
            data: this.typeOrderNum,
            animationDuration: 3000,
            animationEasing: "cubicInOut"
          },
          {
            name: "订单金额",
            yAxisIndex: 1,
            smooth: true,
            type: "line",
            itemStyle: {
              normal: {
                color: "#ff8c2d",
                lineStyle: {
                  color: "#ff8c2d",
                  width: 2
                }
              }
            },
            data: this.typeOrderMoney,
            animationDuration: 3000,
            animationEasing: "quadraticOut"
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.left {
  width: 76%;
}
.el-card {
  border-radius: 6px;
}
.left .t1 {
  font-size: 19px;
  color: #222;
  margin: 10px 0;
  box-sizing: border-box;
  // padding-left: 30px;
  font-weight: 700;
  margin-left: 20px;
}
.right {
  width: 23%;
}
.top8 {
  background-color: #fff;
  height: 50px;
  width: 100%;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.countCallNumber h4 {
  width: 100%;
  float: left;
}
.countCallNumber img {
  width: 25px;
  height: 25px;
  float: right;
  margin-right: 10px;
  margin-top: -3px;
}
.countCallNumber {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  justify-content: flex-start;
}
.countCallNumber span {
  float: right;
  font-size: 14px;
  color: #666;
}
.countCallNumber h6 {
  display: inline-block;
  width: 50%;
  margin-top: 3px;
}
.countCallNumber h6 span {
  float: none;
}
.countCallNumber span i {
  font-style: normal;
  color: #000;
  display: flex;
  justify-content: space-between;
}
.countCallNumber .right {
  width: 60%;
  display: flex;
  justify-content: flex-start;

  .box {
    display: flex;
    // width: 50%;
    // width: 200px;
    margin-right: 15px;
    justify-content: center;
    align-items: center;
    .t1 {
      font-size: 20px;
      color: #888585;
    }
    .t2 {
      font-size: 20px;
      color: #33abf3;
      font-weight: bold;
    }
    .t3 {
      font-size: 20px;
      color: #ff9f52;
      font-weight: bold;
    }
    .t4 {
      font-size: 20px;
      color: #42b871;
      font-weight: bold;
    }
  }
}
.el-row {
  margin-bottom: 20px;
}
.index_Data {
  background-color: #fff;
  border-radius: 3px;
  padding: 20px 0;
}
.index_Data .box {
  width: 25%;
  float: left;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  box-sizing: border-box;
  // padding-left: 10px;
  border-right: 1px solid #cccccc;
  img {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .img {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .img2 {
    display: inline-block;
    width: 46px;
    height: 46px;
    border-radius: 50%;
  }
  .box1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 15px;
    .t2 {
      font-size: 25px;
      color: #555;
      font-weight: 550;
      // text-align: center;
    }
    .t3 {
      font-size: 16px;
      color: #888585;
    }
  }
  .box2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 15px;
    cursor: pointer;
    .t2 {
      font-size: 25px;
      color: #555;
      font-weight: 550;
      // text-align: center;
    }
    .t3 {
      font-size: 16px;
      color: #888585;
    }
  }
  .box2:hover {
    .t2 {
      font-size: 25px;
      color: #33abf3;
      font-weight: 550;
      // text-align: center;
    }
    .t3 {
      font-size: 16px;
      color: #33abf3;
    }
  }
}

.el-row {
  margin-bottom: 20px;
}
.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}
.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}
.grid-num {
  font-size: 30px;
  font-weight: bold;
}
.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}
.grid-con-1 .grid-con-icon {
  background: #33abf3;
}
.grid-con-1 .grid-num {
  color: #33abf3;
}
.grid-con-2 .grid-con-icon {
  background: #81dae2;
}
.grid-con-2 .grid-num {
  color: #81dae2;
}
.grid-con-3 .grid-con-icon {
  background: #b6a1dc;
}
.grid-con-3 .grid-num {
  color: #b6a1dc;
}
.grid-con-4 .grid-con-icon {
  background: #ff9f52;
}
.grid-con-4 .grid-num {
  color: #ff9f52;
}
.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}
.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}
.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}
.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}
.user-info-list span {
  margin-left: 70px;
}
.mgb20 {
  margin-bottom: 20px;
}
.todo-item {
  font-size: 14px;
}
.todo-item-del {
  text-decoration: line-through;
  color: #999;
}
.schart {
  width: 100%;
  height: 300px;
  position: relative;
}
.t8 {
  color: #333;
  font-size: 15px;
  font-weight: 550;
}
.schart-box {
  display: inline-block;
  margin: 20px;
  width: 100%;
}
.schart {
  width: 680px;
  height: 400px;
}
.content-title {
  clear: both;
  font-weight: 400;
  line-height: 50px;
  margin: 10px 0;
  font-size: 22px;
  color: #1f2f3d;
}
.right1 {
  position: relative;
  padding-top: 30px;
  // height: 500px;
  .top {
    position: absolute;
    top: 10px;
    left: 0;
    color: #fff;
    background-color: #33abf3;
    border-radius: 0 20px 20px 0;
    padding: 4px 18px;
    font-size: 22px;
    cursor: pointer;
  }
  .scroll {
    overflow-y: auto;
    max-height: 368px;
  }
  .scroll2 {
    overflow-y: auto;
    max-height: 400px;
  }
  .scroll::-webkit-scrollbar {
    width: 0;
  }
  .scroll2::-webkit-scrollbar {
    width: 0;
  }
  .info {
    border-bottom: 1px solid #cccccc;
    padding: 10px 0;
    position: relative;
    h4 {
      font-size: 19px;
      color: #333;
      margin: 10px 0 !important;
    }
    .tt {
      color: #979595;
      margin-top: 5px;
      font-size: 17px;
      font-family: PingFangSC-Semibold, sans-serif;
    }
    .c1 {
      color: #ff9f52;
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
    }
    .c2 {
      color: #33abf3;
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 17px;
    }
  }
  .top2 {
    position: absolute;
    top: 10px;
    left: 0;
    color: #fff;
    background-color: #ff9f52;
    border-radius: 0 20px 20px 0;
    padding: 4px 18px;
    font-size: 22px;
  }
  .info2 {
    border-bottom: 1px solid #cccccc;
    position: relative;
    margin-top: 10px;
    h3 {
      font-size: 18px;
      color: #222;
    }
    .tt {
      color: #333;
      margin-top: 5px;
      font-size: 17px;
      font-weight: 550;
      position: relative;
      font-family: PingFangSC-Semibold, sans-serif;
    }
    .ttt {
      font-size: 16px;
      color: #888;
      margin-top: 5px;
      font-family: PingFangSC-Semibold, sans-serif;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .tttt {
      font-size: 14px;
      color: #888;
      margin-top: 5px;
      font-family: PingFangSC-Semibold, sans-serif;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .dian {
      font-weight: bold;
      color: #555;
      font-size: 16px;
      position: absolute;
      top: 50%;
      left: -15px;
      transform: translateY(-50%);
    }
  }
}
.center6 {
  width: 90%;
  margin: 0 auto;
  .top {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-size: 24px;
  }
  .ccc {
    width: 100%;
    margin-top: 20px;
    font-size: 16px;
  }
  .gif {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
}

.table-content {
  max-height: 300px;
  overflow: hidden;
}
.ul1 {
  width: 100%;
  span {
    display: inline-block;
    text-align: center;
    width: 33%;
    padding: 20px 0;
  }
}
.ul2 {
  width: 100%;
  li {
    box-sizing: border-box;
    padding: 10px 0;
    background-color: #4e6ef2;
    color: #ffffff;
    margin-top: 5px;
    span {
      display: inline-block;
      width: 33%;
      text-align: center;
    }
  }
}
</style>
